<template>
  <div class="car-container">
    <div class="mui-card goods-list" v-for="(value,index) in carInfo" :key="value.id">
      <!--内容区-->
      <div class="mui-card-content">
        <mt-switch 
        v-model="$store.getters.getSelected[value.id]" 
        @change="changeSelected(value.id,$store.getters.getSelected[value.id])">
        </mt-switch>
        <img :src="value.thumb_path" alt>
        <div>
          <h1>{{ value.title }}</h1>
          <p>
            <span class="price">¥&nbsp;{{ value.sell_price }}</span>
            <!-- 数字选择框组件 将所选数量传过去-->
            <numBox :count="$store.getters.getCount[value.id]" :goodsid="value.id"></numBox>
            <span class="del" @click="del(value.id,index)">删除</span>
          </p>
        </div>
      </div>
    </div>

    <!-- 结算区域 -->
    <div class="mui-card">
      <!--内容区-->
      <div class="mui-card-content jiesuan">
        <div>
          <p>总计(不含运费)</p>
          <p>
            已勾选商品
            <span class="red">{{ $store.getters.getSelectedGoods.count }}</span>件,总价
            <span class="red">¥&nbsp;{{ $store.getters.getSelectedGoods.price }}</span>
          </p>
        </div>
        <mt-button type="danger">去结算</mt-button>
      </div>
    </div>
  </div>
</template>
<script>
import numBox from "../subcomponents/car_numBox.vue";
export default {
  components: {
    numBox
  },
  data() {
    return {
      carInfo: []
    };
  },
  created() {
    this.getInfo();
  },
  methods: {
    getInfo() {
      var ids = [];
      this.$store.state.car.forEach(item => ids.push(item.id));
      this.$http.get("api/goods/getshopcarlist/" + ids.join(",")).then(res => {
        if (res.body.status == 0) {
          this.carInfo = res.body.message;
        }
      });
    },
    del(id, index) {
      this.carInfo.splice(index, 1);
      this.$store.commit("del", id);
    },
    changeSelected(id,selected){
        this.$store.commit('updateSelected',{
            id,
            selected
        })
    }
  }
};
</script>
<style lang="scss" scoped>
.car-container {
  background: #eee;
  overflow: hidden;
  .goods-list {
    .mui-card-content {
      display: flex;
      align-items: center;
    }
    img {
      width: 60px;
      height: 60px;
      margin: 0 20px;
    }
    h1 {
      font-size: 13px;
    }
    p {
      margin: 7px 0 0 0;
      .price {
        color: red;
        font-weight: bold;
      }
    }
  }
  .jiesuan {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .red {
        color: red;
        font-weight: bold;
        font-size: 16px;
    }
  }
}
</style>
